<template>
	<div class="header">
		<div class="headerTop">
			<!-- 1. 左侧 -->
			<!-- 1-1.图书logo -->
			<img class="headerLogo" src="@/assets/logo.png" />
			<!-- 1-2.字体模块 -->
			<span class="headerTitle" @click="$router.push('/home')">岳麓书院知识整理系统</span>
			<!-- 2. 右侧 -->
			<!-- 登录状态 -->
			<a class="status" @click="judge">{{ this.userName }}</a>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import requests from '@/api/ajax'
export default {
	data() {
		return {
			// 登录状态/用户名
			userName: '登录/注册'
		}
	},
	methods: {
		judge() {
			if (this.userName === '登录/注册') {
				this.$router.push('/login')
			} else {
				if (this.status == 2) {
					this.$router.push('/adhome')
				}
				if (this.status == 1) {
					this.$router.push('/edhome')
				}
				if (this.status == 0) {
					this.$router.push('/userhome')
				}
			}
		}
	},
	computed: {
		...mapState({
			LoginState: (state) => {
				if (window.localStorage.username == null) {
					return '登录/注册'
				} else if (window.localStorage.username != null) {
					requests.get('/users/userMassage').then((res) => {
						return window.localStorage.userName
					})
				}
			},
			status: (state) => {
				return state.login.status
			}
		})
	},
	created() {
		requests.get('/users/userMassage').then((res) => {
			this.userName = res.data.userName
		})
	}
}
</script>

<style scoped>
.header {
	height: 45px;
	line-height: 45px;
	background-color: hsl(0, 67%, 35%);
	min-width: 1230px;
}

.headerLogo {
	height: 35px;
}
.headerTitle {
	display: inline-block;
	position: relative;
	font-family: '阿里妈妈数黑体 Bold';
	margin-left: 10px;
	font-weight: 700;
	color: white;
	cursor: pointer;
	src: url('//at.alicdn.com/wf/webfont/cbN9fHghj2rI/KoPa6jf8_jfUg9NdaKi4o.woff2') format('woff2'),
		url('//at.alicdn.com/wf/webfont/cbN9fHghj2rI/O5W84MVVpvQNVBxq1_UVu.woff') format('woff');
	font-display: swap;
}
.status {
	float: right;
	margin-right: 15px;
	color: aliceblue;
	cursor: pointer;
}
</style>
